<template>
    <div>
        <!-- 学生端 -->
        <div id="sidebar" v-if="userdetail.role==0">
            <el-menu  :style="'height: 100vh;'" background-color="#001529" text-color="#ffffff" default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                :collapse="isCollapse">
                <el-menu-item index="1" @click="to(1)">
                    <i class="el-icon-menu"></i>
                    <span slot="title">报道信息</span>
                </el-menu-item>
                <el-menu-item index="2" @click="to(2)">
                    <i class="el-icon-s-finance"></i>
                    <span slot="title">缴费信息</span>
                </el-menu-item>
                <el-menu-item index="3" @click="to(3)">
                    <i class="el-icon-school"></i>
                    <span slot="title">宿舍选取</span>
                </el-menu-item>
                <el-menu-item index="4" @click="to(4)">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">我的信息</span>
                </el-menu-item>
            </el-menu>
        </div>
        
        <!-- 管理员端 -->
        <div id="sidebar" v-if="userdetail.role==1">
            <el-menu :style="'height: 100vh;'" background-color="#001529" text-color="#ffffff" default-active="1-4-1"
                class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
                <el-submenu index="1">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span>系统管理</span>
                    </template>
                    <el-menu-item index="1-1" @click="to_manger(1)">
                        <i class="el-icon-menu"></i>
                        <span slot="title">报道管理</span>
                    </el-menu-item>
                    <el-menu-item index="1-2" @click="to_manger(2)">
                        <i class="el-icon-s-finance"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="1-3" @click="to_manger(3)">
                        <i class="el-icon-school"></i>
                        <span slot="title">宿舍管理</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="to_manger(4)">
                        <i class="el-icon-s-custom"></i>
                        <span slot="title">学生管理</span>
                    </el-menu-item>
                </el-submenu>

                <el-menu-item index="2" @click="to_manger(6)">
                    <i class="el-icon-s-data"></i>
                    <span slot="title">数据概况</span>
                </el-menu-item>

                <el-menu-item index="3" @click="to_manger(7)">
                    <i class="el-icon-document"></i>
                    <span slot="title">报道流程</span>
                </el-menu-item>
            </el-menu>
        </div>
        
        <div class="top"  >
            <div @click="forIsCollapse" :style="{ 'transform': isCollapse ? 'rotate(180deg)' :'rotate(0deg)'}" style="display:inline-block;transition: 0.5s all;">
                <svg style="vertical-align: middle;" t="1667996204371" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="12141" width="16" height="16">
                    <path
                        d="M850.688 830.72a28.416 28.416 0 0 1-22.016-8.704l-352-315.84a31.552 31.552 0 0 1 0-47.936l352-315.776a32 32 0 0 1 46.208 2.176 31.36 31.36 0 0 1-2.176 45.76l-325.824 291.84 325.824 291.84a31.36 31.36 0 0 1 2.176 45.76 35.52 35.52 0 0 1-24.192 10.88z m-341.248 0a28.416 28.416 0 0 1-22.016-8.704l-352-315.84a31.552 31.552 0 0 1 0-47.936l352-315.776a32 32 0 0 1 46.208 2.176 31.36 31.36 0 0 1-2.176 45.76l-325.824 291.84 325.824 291.84a31.424 31.424 0 0 1 2.176 45.76 35.52 35.52 0 0 1-24.128 10.88z"
                        p-id="12142"></path>
                </svg>
            </div>
            <span>/</span>
            <span>{{title}}</span>
            <div >
                
                <el-dropdown @command="handleCommand">
                    
                    <span class="el-dropdown-link">
                        <img src="../assets/g.png" style="margin-top: 7px;margin-right: 9px;height: 25px;vertical-align: top;border-radius: 50%;">
                        {{userdetail.username}}
                    </span>
                    <el-dropdown-menu slot="dropdown" >
                        <el-dropdown-item  icon="el-icon-s-custom" v-if="userdetail.role==0" command="4">个人信息</el-dropdown-item>
                        <el-dropdown-item  icon="el-icon-circle-close" command="5" >退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data() {
        return {
            isCollapse: true,
            title:"",
            list:[],
            
        };
    },
    props:{
        userdetail:{},
        studentdetail:{}
    },
    methods: {
        forIsCollapse(){
            this.isCollapse = !this.isCollapse; 
            this.$emit('isCollapse', this.isCollapse);
        },
        handleOpen(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleCommand(command) {
            // this.to(parseInt(command));
          switch (command){
            case "4":
              this.$router.push("/Information");   //跳转个人信息页
              break;
            case "5":
              localStorage.removeItem('userInfo'); //清除登录用户信息
              this.$router.push("/");             //返回登录
              break;
          }
        },
        to(index){
            switch (index){
                case 1 :
                    this.$router.push("/ArriveMange");
                    this.title = "报道信息"
                    if(!this.list.includes("报道信息"))
                        this.list.push("报道信息");
                    break;
                case 2:
                    this.$router.push("/BillMange");
                    this.title="缴费信息";
                    if (!this.list.includes("缴费信息"))
                        this.list.push("缴费信息");
                    break;
                case 3:
                    this.$router.push("/DormitoryMange");
                    this.title = "宿舍选取";
                    if (!this.list.includes("宿舍选取"))
                        this.list.push("宿舍选取");
                    break;
                case 4:
                    this.$router.push("/Information");
                    this.title = "个人信息";
                    if (!this.list.includes("个人信息"))
                        this.list.push("个人信息");
                    break;
                case 5:
                    this.$router.push("/");
                    break;
            }
            // console.log("触发了");
            this.$emit("list", this.list);
        },
        to_manger(index) {
            switch (index) {
                case 1:
                    this.$router.push("/ArriveInformation");
                    this.title = "报道管理"
                    if (!this.list.includes("报道管理"))
                        this.list.push("报道管理");
                    break;
                case 2:
                    this.$router.push("/UserInformation");
                    this.title = "用户管理";
                    if (!this.list.includes("用户管理"))
                        this.list.push("用户管理");
                    break;
                case 3:
                    this.$router.push("/DormitoryInformation");
                    this.title = "宿舍管理";
                    if (!this.list.includes("宿舍管理"))
                        this.list.push("宿舍管理");
                    break;
                case 4:
                    this.$router.push("/StudentInformation");
                    this.title = "学生管理";
                    if (!this.list.includes("学生管理"))
                        this.list.push("学生管理");
                    break;
                case 5:
                    this.$router.push("/");
                    break;
                case 6:
                    this.$router.push("/SumInformation");
                    this.title = "数据概况";
                    if (!this.list.includes("数据概况"))
                        this.list.push("数据概况");
                    break;
                case 7:
                    this.$router.push("/ArriveListInformation");
                    this.title = "报道流程";
                    if (!this.list.includes("报道流程"))
                        this.list.push("报道流程");
                    break;

            }
            this.$emit("list", this.list);
        },
    },
    mounted(){
        //学生端
        if(this.userdetail.role==0){
            // console.log(0);
            this.title = "报道信息";
            this.list.push("报道信息");
        }else{
            // console.log(1);
            this.title = "报道管理";
            this.list.push("报道管理");
        }
        this.$emit("list", this.list);
    }
}
</script>


<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}
body {
    margin: 0px;
    padding: 0px;
}
.top{
    text-align: initial;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background-color: #ffffff;
    border-bottom: 0.7px solid rgba(0, 0, 0, .2);
}

.top>span:first-of-type{
    margin-left: 11px;
    color: #999999;
}
.top>span:last-of-type{
    margin-left: 11px;
    color: #999999;
}
.top>div:last-of-type{
    height: 100%;
    float: right;
    width: 100px;
    text-align: center;
}
.top>div:last-of-type:hover {
    background: #EBEEF5;
}

#sidebar{
    float: left;
    margin-right: 10px;
}
</style>



